<template>
  <div class="commentBox">
    <h3 class="commentsTitle">comment</h3>
    <div class="commentBox-text">
      <textarea
        class="commentsInp"
        v-model="desc"
        placeholder="commentNamespace.replyPlaceholder"
      ></textarea>
      <button class="btn" @click="btn(desc)">commentNamespace.publish</button>
    </div>
    <div class="commentsList">
      <div class="commentsList-item" v-for="(item, index) in data" :key="index">
        <dl>
          <dt class="userimg">
            <img
              class="img"
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F11%2F20210711101603_fd40d.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1677856653&t=f129de3f75588137b1987f8dfbbe3451"
              alt=""
            />
          </dt>
          <dd>
            <h2 style="line-height: 50px">{{ item }}</h2>
            <p style="margin-left: 20px; font-size: 16px">{{ item }}</p>
          </dd>
        </dl>
        <p style="margin-left: 20px; font-size: 14px; margin-top: 10px">
          Chrome 108.0.0.0 Blink 108.0.0.0 Mac OS 10.15.7 · 4
          天前commentNamespace.reply
        </p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      desc: "",
      data: ["糖糖"],
    };
  },
  methods: {
    btn(desc) {
      console.log(desc);
      this.data.unshift(desc);
    },
  },
};
</script>
<style lang="scss" scoped>
.userimg {
  float: left;
}
.commentsList {
  width: 100%;
}
.img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 30px;
}
.commentsList-item {
  width: 98%;
  height: 150px;
  padding-bottom: 20px;
  margin-bottom: 10px;
  background: var(--contentBackground);
}
.commentBox-text {
  position: relative;
  margin-bottom: 30px;
}
.btn {
  width: 300px;
  font-size: 14px;
  height: 30px;
  position: absolute;
  right: 20px;
  bottom: -30px;
}
.commentsTitle {
  padding-top: 10px;
  text-align: center;
  font-size: 20px;
  line-height: 40px;
}
.commentsInp {
  width: 98%;
  height: 100px;
  font-size: 0.25rem;
  padding-top: 0.1rem;
  padding-left: 0.1rem;
}
</style>
